<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>萌宠之家 - 产品中心</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <nav class="navbar">
        <!-- 导航栏 -->
    </nav>

    <main class="product-main">
        <div class="security-banner">
            <i class="fas fa-shield-alt"></i>
            <div>正品保障，所有商品均通过严格质检</div>
        </div>

        <div class="filter-container">
            <div class="filter-header">
                <h3>商品筛选</h3>
                <div class="filter-reset">重置筛选</div>
            </div>
            <div class="filter-options">
                <div class="filter-group">
                    <h4>商品分类</h4>
                    <div class="filter-buttons">
                        <button class="filter-btn active" data-category="all">全部商品</button>
                        <button class="filter-btn" data-category="food">宠物食品</button>
                        <button class="filter-btn" data-category="toy">宠物玩具</button>
                        <button class="filter-btn" data-category="care">护理用品</button>
                    </div>
                </div>
                <div class="filter-group">
                    <h4>价格区间</h4>
                    <div class="price-range">
                        <input type="range" min="0" max="500" value="0" class="price-slider">
                        <div class="price-values">
                            <span>¥0</span>
                            <span>¥500+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="product-gallery">
            <div class="product-grid">
                <!-- 商品将通过JS动态加载 -->
            </div>
        </section>
    </main>

    <!-- 购物车侧边栏 -->
    <aside class="cart-sidebar">
        <!-- 原有内容 -->
    </aside>

    <script src="js/main.js"></script>
</body>
</html>

<div id="productModal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <div class="modal-body">
            <img class="modal-image" src="" alt="商品图片">
            <div class="modal-details">
                <h3 class="modal-title"></h3>
                <p class="modal-price"></p>
                <div class="modal-specs"></div>
                <p class="modal-desc"></p>
                <button class="btn add-to-cart-btn">加入购物车</button>
            </div>
        </div>
    </div>
</div>